<!--
 * @Author: wuzhen
 * @Date: 2019-12-03 14:04:35
 * @LastEditors: wuzhen
 * @LastEditTime: 2019-12-06 09:17:36
 * @Description: 上传
 -->

<template>
  <div class="upload">
    <template v-if="showUploadList">
      <div class="upload-list" v-for="(item, index) in uploadList" :key="index" :style="styleProps">
        <img :src="'https://res.squrab.com/' + item.url">
        <div class="upload-list-cover">
          <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
          <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
        </div>
      </div>
    </template>
    <div class="upload-list" v-if="showProgress" :style="styleProps">
      <Progress :percent="percentage" hide-info></Progress>
    </div>
    <Upload ref="upload" :show-upload-list="false" :format="format" :accept="accept" :max-size="maxSize * 1024" :before-upload="handleBeforeUpload" :on-progress="handleProgress" :on-success="handleSuccess" :on-exceeded-size="handleMaxSize" type="drag" action="https://upload.qiniup.com" :data="uploadData" :style="styleProps" style="display:inline-block;margin-right:15px" v-if="!(uploadList.length === 1 && fileSize === 1) && !showProgress">
      <div :style="styleProps" class="upload-action">
        <Icon type="ios-add" size="40"></Icon>
        <p>{{actionTxt}}</p>
      </div>
    </Upload>
    <slot name="uploadTxt"></slot>
    <Modal title="图片预览" v-model="showImg" footer-hide>
      <img :src="bigImgSrc" v-if="showImg" style="width: 100%">
    </Modal>
    <!-- <vueCropper
      ref="cropper"
      :img="option.img"
      :outputSize="option.size"
      :outputType="option.outputType"
    ></vueCropper> -->
  </div>
</template>
<script>
import { getQiniuToken } from "@/api";
// import { VueCropper } from 'vue-cropper';
export default {
  props: {
    showUploadList: {
      type: Boolean,
      default: true
    },
    // 默认显示文件
    defaultList: {
      type: Array,
      default: () => []
    },
    // 是否支持上传多个
    fileSize: {
      type: [Number, String],
      default: 5
    },
    maxSize: {
      type: Number,
      default: 2
    },
    format: {
      type: Array,
      default: () => ["jpg", "jpeg", "png", "bmp"]
    },
    accept: {
      type: String,
      default: "image/*"
    },
    actionTxt: {
      type: String,
      default: "图片上传"
    },
    // 图片框大小
    styleProps: {
      type: Object,
      default: () => {
        return {
          width: "100px",
          height: "100px"
        };
      }
    }
  },
  components: {
    // VueCropper
  },
  data() {
    return {
      uploadList: [],
      uploadData: {
        token: null,
        key: ""
      },
      showImg: false,
      bigImgSrc: "",
      showProgress: false,
      percentage: 0,
      option: {
        img: "",
        outputSize: "",
        outputType: "jpg"
      }
    };
  },
  mounted() {
    this.uploadList = this.defaultList;
  },
  methods: {
    // 文件上传前钩子-获取七牛云上传token
    handleBeforeUpload(file) {
      this.file = file;
      const check = this.uploadList.length < this.fileSize;
      if (!check) {
        this.$Message.warning(`最多只能上传${this.fileSize}个文件`);
        return check;
      }
      getQiniuToken({
        name: file.name,
        type: 1
      }).then(res => {
        this.uploadData = {
          token: res.data.token,
          key:
            "langya/" +
            file.type +
            "/" +
            Math.ceil(Math.random() * Math.pow(10, 15)) +
            "." +
            file.type.split("/")[1]
        };
        setTimeout(() => {
          this.$refs.upload.post(this.file);
        }, 100);
      });
      return false;
    },
    // 上传进度钩子
    handleProgress(event) {
      this.showProgress = true;
      this.percentage = event.percent;
      if (event.percent === 100) {
        this.showProgress = false;
      }
    },
    // 文件上传成功时钩子
    handleSuccess(res, file) {
      this.uploadList.push({
        ...file,
        ...{
          url: res.key
        }
      });
      this.getFileList();
    },
    handleMaxSize() {
      this.$Message.error(`文件太大，不能超过${this.maxSize}M`);
    },
    // 文件上传
    handleUpload() {
      this.$refs.upload.post(this.file);
    },
    // 图片预览
    handleView(file) {
      this.bigImgSrc = "https://res.squrab.com/" + file.url;
      this.showImg = true;
    },
    // 图片删除
    handleRemove(file) {
      this.uploadList.splice(this.uploadList.indexOf(file), 1);
      this.getFileList();
    },
    // 获取上传的文件
    getFileList() {
      const uploadList = this.uploadList.map(v => {
        return v.url;
      });
      this.$emit("file-list", uploadList);
    }
  }
};
</script>
<style lang="less" scoped>
.upload {
  &-list {
    display: inline-block;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2);
    margin-right: 15px;
    img {
      width: 100%;
      height: 100%;
    }
    &-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
      align-items: center;
      justify-content: center;
      i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
      }
    }
    &:hover {
      .upload-list-cover {
        display: flex;
      }
    }
  }
  &-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    p {
      font-size: 12px;
    }
  }
}
</style>